<template>
  <div>
    <el-dialog v-model="open" :before-close="cancle" title="应付费详情">
      <div>
        <el-row class="mb8" :gutter="10">
          <el-col :span="1.5">
            <el-button
              style="margin-right"
            
              type="primary"
              @click="handleAdd"
            >
              新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              :disabled="form.tableList.length < 1"
            
              type="primary"
              @cllick="submit"
            >
              保存
            </el-button>
          </el-col>
        </el-row>
        <vxe-grid
          ref="xGrid"
          :data="tabledata"
          v-bind="gridOptions1"
          @edit-disabled="editDisabledEvent"
        >
          <template #serviceChannelCodes="{ row }">
            <vxe-input v-model="row.serviceChannelCode"></vxe-input>
          </template>
          <template #ladingNos="{ row }">
            <vxe-input v-model="row.ladingNo"></vxe-input>
          </template>
          <template #feeNames="{ row }">
            <vxe-input v-model="row.feeName"></vxe-input>
          </template>
          <template #unitPrices="{ row }">
            <vxe-input v-model="row.unitPrice"></vxe-input>
          </template>
          <template #numbers="{ row }">
            <vxe-input v-model="row.number"></vxe-input>
          </template>
          <template #amounts="{ row }">
            <vxe-input v-model="row.amount"></vxe-input>
          </template>
          <template #currencys="{ row }">
            <vxe-input v-model="row.currency"></vxe-input>
          </template>
          <template #exchangeRates="{ row }">
            <vxe-input v-model="row.exchangeRate"></vxe-input>
          </template>
          <template #remarkss="{ row }">
            <vxe-input v-model="row.remarks"></vxe-input>
          </template>
          <template #operate="{ row,$index }">
            <vxe-button
              icon="fa fa-delete"
              title="删除"
              circle
              @click="editRowEvent(row,$index)"
            ></vxe-button>
          </template>
        </vxe-grid>
      </div>
    </el-dialog>
  </div> 
</template>
<script lang="ts" setup>
import { ref, defineComponent, reactive } from 'vue'
import { ElButton } from 'element-plus'
import { VxeGridProps, VxeGridEvents } from 'vxe-table'

const open = ref(false)
const form = ref({
  tableList: [],
})
const xGrid = ref(null)
const tabledata = ref([])
const gridOptions1 = reactive({
  border: true,
  showOverflow: true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    activeMethod({ columnIndex }) {
      if (columnIndex === 1) {
        return false
      }
      return true
    },
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'serviceChannelCode', title: '服务商', editRender: {}, slots: { edit: 'serviceChannelCodes' } },
    { field: 'ladingNo', title: '提单号', editRender: {}, slots: { edit: 'ladingNos' } },
    { field: 'feeName', title: '费用名称', editRender: {}, slots: { edit: 'feeNames' } },
    { field: 'unitPrice', title: '单价', editRender: {}, slots: { edit: 'unitPrices' } },
    { field: 'number', title: '数量', editRender: {}, slots: { edit: 'numbers' } },
    { field: 'amount', title: '金额', editRender: {}, slots: { edit: 'amounts' } },
    { field: 'currency', title: '币种', editRender: {}, slots: { edit: 'currencys' } },
    { field: 'exchangeRate', title: '汇率', editRender: {}, slots: { edit: 'exchangeRates' } },
    { field: 'remarks', title: '备注', editRender: {}, slots: { edit: 'remarkss' } },
    
  ],
  data: [
   
  ],
})
const editDisabledEvent: VxeGridEvents.EditDisabled = () => {
  console.log('禁止编辑')
}
const editRowEvent = (row: { [key: string]: any }, index) => {
  
}
const handleAdd = () => {

}
const submit = () => {
  
}
const cancle = () => {
  open.value = false
}
defineExpose({
  open,
 
})
</script>